<script>
export default {
    name: "MenuItem",
    functional: true,
    props: {
        icon: {
            type: String,
            default: "",
        },
        title: {
            type: String,
            default: "",
        },
        isButton: {
            type: Boolean,
            default: false
        }
    },
    render(h, context) {
        const { icon, title, isButton } = context.props;
        const vnodes = [];
        if (icon) {
            // vnodes.push(<svg-icon icon-class={icon} />);
            let classValue = `iconfont ${icon}`;
            vnodes.push(<i class={classValue}/>);    
        }

        if (title) {
            if (isButton) {
                vnodes.push(<el-button type="primary" size="mini"><i class="el-icon-refresh" style="color:#fff"></i>{title}</el-button>);
            } else {
                vnodes.push(<span slot="title">{title}</span>);
            }
        }
        return vnodes;
    },
};
</script>
<style lang="scss" scoped>
.svg-icon {
    color: #bfbfbf;
}
.el-menu-item .el-button .el-icon-refresh{
    color: #fff;
}
</style>
